<template>
	<div class="musicList">
		<table class="table table-rank">
			<thead>
				<tr>
					<th class="first"></th>
					<th>
						<div class="wp">标题</div>
					</th>
					<th class="w2">
						<div class="wp">时长</div>
					</th>
					<th class="w3">
						<div class="wp">歌手</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr
					v-for="(item, index) in musicList"
					:key="item.id"
					:class="!(index % 2) ? 'even' : ''"
				>
					<td>
						<div class="hd">
							<span class="num">{{ index + 1 }}</span>
							<div class="rk"><span class="ico ico-new"></span></div>
						</div>
					</td>
					<td class="rank">
						<div class="cd">
							<a v-if="index + 1 <= 3" href="javascript:;">
								<img
									:src="item.al.picUrl"
									alt=""
									@click="paly"
									:data-id="item.id"
								/>
							</a>
							<span class="ply ply-slt">&nbsp;</span>
							<a :title="item.name" @click="paly" :data-id="item.id">{{
								item.name
							}}</a>
						</div>
					</td>
					<td class="operation">
						<span>{{ dayjs(item.dt).format("mm.ss") }}</span>
						<div class="opt">
							<span class="icn-add"></span>
							<span class="icn icn-fav"></span>
							<span class="icn icn-share"></span>
							<span class="icn icn-dl"></span>
						</div>
					</td>
					<td>
						<a href="javascript:;" :title="item.ar[0].name">{{
							item.ar[0].name
						}}</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	name: "MusicList",
};
</script>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";

const router = useRouter();

defineProps({
	musicList: {
		type: Array,
		required: true,
	},
});

const paly = (e) => {
	const id = e.target.dataset.id;
	router.push({ path: "/music", query: { id: id } });
};
</script>

<style lang="less" scoped>
a:hover {
	text-decoration: underline;
}
.musicList {
	.table {
		width: 100%;
		border: 1px solid #d9d9d9;
		border-collapse: collapse;
		border-spacing: 0;
		table-layout: fixed;
		th {
			height: 38px;
			vertical-align: top;
			text-align: left;
			font-weight: normal;
			color: #666;
			background: url(@/image/table.png) no-repeat 0 9999px;
			background-color: #f7f7f7;
			background-position: 0 0;
			background-repeat: repeat-x;
			.wp {
				height: 18px;
				line-height: 18px;
				padding: 8px 10px;
				background: url(@/image/table.png) no-repeat 0 9999px;
				background-position: 0 -56px;
			}
		}
		.w2 {
			width: 91px;
		}
		.w3 {
			width: 26%;
		}
		td {
			padding: 6px 10px;
			line-height: 18px;
			text-align: left;
			background: url(@/image/table.png) no-repeat 0 9999px;
		}
		.even {
			td {
				background-color: #f7f7f7;
			}
		}
		.hd {
			height: 18px;
			.num {
				float: left;
				width: 25px;
				margin-left: 0;
				text-align: center;
				color: #999;
			}
		}
		.icn {
			float: left;
			width: 18px;
			height: 16px;
			margin: 2px 0 0 4px;
			overflow: hidden;
			text-indent: -999px;
			cursor: pointer;
			background: url(@/image/table.png) no-repeat 0 9999px;
		}
		.operation {
			.opt {
				display: none;
				overflow: hidden;
				margin-right: -10px;
				.icn-add {
					float: left;
					margin-top: 2px;
					width: 13px;
					height: 13px;
					display: inline-block;
					overflow: hidden;
					vertical-align: middle;
					background: url(@/image/icon.png) no-repeat 0 9999px;
					background-position: 0 -700px;
				}
				.icn-add:hover {
					background-position: -22px -700px;
				}
				.icn-fav {
					background-position: 0 -174px;
				}
				.icn-fav:hover {
					background-position: -20px -174px;
				}
				.icn-share {
					background-position: 0 -195px;
				}
				.icn-share:hover {
					background-position: -20px -195px;
				}
				.icn-dl {
					background-position: -81px -174px;
				}
				.icn-dl:hover {
					background-position: -104px -174px;
				}
			}
		}
		tr:hover {
			.operation {
				& > span {
					display: none;
				}
				.opt {
					display: block;
				}
			}
		}
	}
	.table-rank {
		.first {
			width: 77px;
		}
		.rk {
			float: right;
			width: 32px;
			margin-right: -5px;
			text-align: center;
		}
		.ico-new {
			display: block;
			float: none;
			margin: 0 auto;
			padding-left: 0;
		}
		td.rank {
			padding-top: 10px;
			padding-bottom: 10px;
			.cd {
				display: flex;
				align-content: center;
				height: 50px;
				img {
					width: 50px;
					height: 50px;
					margin-right: 14px;
				}
				.ply {
					width: 17px;
					height: 17px;
					margin-top: 17px;
					margin-right: 8px;
					cursor: pointer;
					background: url(@/image/table.png) no-repeat 0 9999px;
					background-position: 0 -103px;
				}
				.ply:hover {
					background-position: 0 -128px;
				}
				.ply-slt {
					background-position: -20px -128px;
				}
				& > a {
					line-height: 50px;
				}
			}
		}
	}

	.ico {
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		background: url(@/image/icon.png) no-repeat 0 9999px;
	}
	.ico-new {
		width: 16px;
		height: 17px;
		background-position: -67px -283px;
	}
}
</style>
